<!DOCTYPE html>
<html>

<head>

    <style>
        body {
            background-color: #f2f2f2;
        }

        .container {
            border: 2px solid #ccc;
            border-radius: 10px;
            margin-top: 50px;
            margin-left: 100px;
            width: 400px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px #ccc;
        }

        h1 {
            text-align: center;
        }

        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 20px 0;
            /* display: inline-block; */
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <container>
        <div class="container">
            <input type="text" class="user" placeholder="请输入账号">
            <input type="text" class="pwd" placeholder="请输入密码">
            <button class="btn">注册</button>
        </div>
    </container>
</body>

<script src="./a.js"></script>

<script>

    $$('.btn').onclick = function () {
        const user = $$('.user').value;
        const pwd = $$('.pwd').value;

        ajax({
            type: 'post',
            url: 'http://121.43.116.41/php/reg.php',
            data: {
                username: user,
                password: pwd

            },
            success: res => {
                console.log(res);
                const { msg, status } = res;
                if (status) {
                    // 注册成功，跳转到登录页面
                    location.href = 'login.html'
                } else {
                    //注册失败，给出提示
                    alert(msg)
                }
            }
        })


        // 这是在创建一个新的 URLSearchParams 对象，它是用来处理 URL 查询参数的。
        //   它可以通过 append() 方法添加新的参数，或者使用 set() 方法设置参数的值。
        //   同时，它还支持删除参数，获取参数的值，以及将参数转换为字符串等操作。
        //   在前端开发中，常常被用来构建 URL 查询字符串，以便将数据传递给服务器或 API。

        const params = new URLSearchParams();
        params.append('username', user);
        params.append('password', pwd);

        // fetch('http://121.43.116.41/php/reg.php', {
        //     method: 'POST',  //如果不指定method的类型的话，那么默认使用get的请求方式
        //     headers: {
        //         'Content-Type': 'application/x-www-form-urlencoded',//设置请求头
        //     },
        //     body: params

        // body: JSON.stringify({
        //     username: user,
        //     password: pwd
        // })
        // })
        //     .then(res => res.json())
        //     .then(data => {
        //         const { msg, status } = data;
        //         console.log(data);
        //         if (status) {
        //             // location.href = 'login.html';
        //         } else {
        //             alert(msg);
        //         }
        //     })
        //     .catch(error => console.error('Error:', error));



    }



 // https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

 // 虽然Fetch是一个非常强大和灵活的API，但它也有一些缺点：

// 1.兼容性问题：Fetch API不支持所有的浏览器，特别是在旧版浏览器上可能无法正常工作。
//   但可以通过使用polyfills进行支持。

// 2.默认不发送cookie：Fetch API默认不会发送cookie，而需要手动添加选项才能发送cookie。 
//   这在某些情况下可能会导致错误。

// 3.无法中止请求：在某些情况下，可能需要中止请求或取消请求，但Fetch API没有提供这样的功能。
//   虽然可以使用AbortController和AbortSignal API来解决这个问题，但这些API同样不被所有浏览器支持。

// 4.重用响应对象：Fetch API不能重用响应对象，即在处理完响应后， 
//   不能将同一个响应对象用于另一个请求。这可能会导致性能问题，特别是在处理大量请求时。

// 5.困难处理错误状态：Fetch API默认只在请求发生网络错误时才会拒绝（rejected）Promise。
//   这使得处理HTTP错误状态码比较困难，需要编写额外的代码来检查响应的状态码并抛出错误

// axios

</script>

</html>